<!--
 * @Description: 
 * @Author: mmzhang
 * @Date: 2022-12-16 14:53:54
 * @LastEditTime: 2023-01-12 11:35:11
-->
<template>
  <div>
    <!--统计信息-->
    <div class="flex count-content flex-vertical-center flex-horizontal-between">
      <Select v-model="countType" style="width:100px" v-if="countType" @on-change="changeCountFun">
        <Option v-for="item in typeList" :value="item.value" :key="item.value">
          {{ item.label }}</Option>
      </Select>
      <div class="count-num">
        <ul class="flex flex-horizontal-between">
          <li v-for="(item,index) in countList" :key="index"
            :class="['position-relative',{'count-line':item.line}]">
            <Icon type="ios-help-circle-outline" @click="showTips()" size="22" color="#D9001B"
              style="position:absolute;top:0px;left:-20px;cursor: pointer;" v-if="index==0" />
            <p class="num">
              {{String(countVal[item.key]).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}}
            </p>
            <p class="text">{{item.title}}</p>
          </li>
        </ul>
      </div>
      <div class="hand view" @click="clickBtn" v-if="showClick">
        <p class="text-center icon-style" v-if="countType!=0">
          <Icon type="ios-arrow-up" />
        </p>
        <p class="text-center icon-style" v-if="countType!=0">
          <Icon type="ios-arrow-up" />
        </p>
        <p class="text-center">{{countType==0?'查看净值':'查看总销'}}</p>
        <p class="text-center icon-style" v-if="countType==0">
          <Icon type="ios-arrow-down" />
        </p>
        <p class="text-center icon-style" v-if="countType==0">
          <Icon type="ios-arrow-down" />
        </p>
      </div>
    </div>
    <!--提示-->
    <tips-page ref="tipsPage" :tips="tips"></tips-page>
  </div>
</template>
<script>
  import tipsPage from '@/components/biz/tipsPage.vue'
  export default {
    data() {
      return {
        countType: 0,
        countList: [],
        countVal: {},
        typeList: [{
          value: 1,
          label: '金额'
        }, {
          value: 2,
          label: '面积'
        }],
        tips:'',
        showClick:false
      }
    },
    watch: {
    },
    components:{
      tipsPage
    },
    methods: {
      // 改变统计展示
      changeCountFun(){
        this.$emit('onChange',this.countType)
      },
      clickBtn(){
        this.countType=this.countType == 0?1:0
        this.changeCountFun()
      },
      // 外部改变
      changeType(countType){
        this.countType = countType
      },
      initData(tips, countList, countVal,showClick=true) {
        this.showClick = showClick
        this.tips = tips
        this.countList = countList
        this.countVal = countVal
      },
      showTips() {
        this.$refs.tipsPage.show()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .count-content {
    margin-bottom: 8px;
    padding: 5px 10px 0 10px;
    background-color: #e8eaec;

    ::v-deep .ivu-select-selection {
      background-color: #e8eaec;
      border: 1px solid #999;
    } 

    ::v-deep .ivu-select-dropdown {
      width: 100px;
      background-color: #e8eaec;
    }

    ::v-deep .ivu-select-item{
      margin-left: 0;
    }

    .count-line {
      border-right: 1px solid #999;
      padding-right: 30px;
    }

    .count-num {
      width: 85%;
      overflow-x: scroll;
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    ul {
      width: fit-content;
    }


    li {
      margin-left: 20px;
      min-width: 100px;

      p {
        line-height: 32px;
      }

      .num {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        color: #222222;
      }

      .text {
        font-size: 12px;
        color: #666;
        text-align: center;
      }
    }

    .view {
      width: 80px;
      margin-left: 20px;
      color: #2d8cf0;
    }

    .icon-style {
      height: 10px;
      line-height: 10px;
    }
  }
</style>